<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta content="telephone=no" name="format-detection" />
    <script src="js/layui/layui.all.js"></script>
    <script src="js/vue.js"></script>
    <link rel="stylesheet" href="js/layui/css/layui.css">
    <style rel="stylesheet">
        body{
            margin: 20px;
            padding: 0;
            background-color: #1b1b1b;
            width: 100%;
            height: 100%;
        }

        .ic{
            float: left;
            height: 30px;
            width: 30px;
            line-height: 30px;
        }
        .time{
            float: left;
            color: #C2BE9E;
            height:30px;
            line-height: 30px;
            font-size: 14px;
            text-align: left;
            font-weight: 200;
        }
        /*1-10蓝  10-20淡紫色*/
        /**/

        .name3{
            /*width: 40%;*/
            float: left;
            color: #FF6347;
            height:30px;
            line-height: 30px;
            font-size: 16px;
            text-align: left;
            font-weight: 600;
        }

        .name2{
            /*width: 40%;*/
            float: left;
            color: #FFA54F;
            height:30px;
            line-height: 30px;
            font-size: 16px;
            text-align: left;
            font-weight: 600;
        }

        .name1{
            /*width: 40%;*/
            float: left;
            color: #01AAED;
            height:30px;
            line-height: 30px;
            font-size: 16px;
            text-align: left;
            font-weight: 600;
        }
        .say{
            font-weight: 600;
            /*width: 60%;*/
            font-size: 16px;
            float: left;
            color: #ffffff;
            height:30px;
            line-height: 30px;
            text-align: left;
        }
        .danmu{
            /*background: #4b4b4b;*/
            width: 100%;
            /*height: 60%;*/
        }

        .msg-box{
            width: 100%;
            height:30px;
        }
    </style>
</head>
<body>
<!--<div class="danmu">-->
<!--<div id="APP">-->
<!--<div id="danmuMsg" style="position: fixed;bottom: 20px;left: 20px;">-->
<!--<div  class="layui-row" v-for="item in list">-->
<!--<div class="msg-box">-->
<!--<div class="ic">-->
<!--<img style="width: 26px;height: 26px;" class="layui-circle" :src="item.ic"/>-->
<!--</div>-->
<!--&lt;!&ndash;<div class="time">[{{item.hms}}]</div>&ndash;&gt;-->
<!--<div v-if="item.lv<=10" class="name1">{{item.nickName}}：</div>-->
<!--<div v-else-if="item.lv<=25" class="name2">{{item.nickName}}：</div>-->
<!--<div v-else class="name3">{{item.nickName}}：</div>-->

<!--<div class="say">{{item.content}}</div>-->
<!--</div>-->

<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<div id="msgList">

</div>

<script>
    var $;
    var list=[];
    var interval;
    var index=0;
    var param={
        "startLevel":10,
        "limit":20
    };
    layui.use('jquery', function(){
        $=layui.jquery;
//        startGetMsg();

    });

    var MsgFactory=function () {
        var self=this;
        self.list=[];
        self.__temp__='<div class="msg-box" id="{{id}}">' +
            '<div class="ic"><img style="width: 26px;height: 26px;" class="layui-circle" src="{{item.ic}}"/>' +
            '</div><div  class="name1">{{item.nickName}}：</div>' +
//            '<div v-else-if="item.lv<=25" class="name2">{{item.nickName}}：</div>' +
//            '<div v-else class="name3">{{item.nickName}}：</div>' +
            '<div class="say">{{item.content}}</div>' +
            '</div>';
        self.id="";
        self.doc={};
        self.__moveHeight__=30;
        this.setId=function (id) {
            self.id=id;
        }
        this.init=function (id) {
            this.setId(id);
            self.doc=$("#"+self.id);
        }

        this.addMsg=function (msg) {
            //TODO 处理视图
            msg.id="msg_id_"+msg.id;
            var child=self.__temp__
                .replace("{{item.nickName}}",msg.nickName)
                .replace("{{item.ic}}",msg.ic)
                .replace("{{item.content}}",msg.content).replace("{{id}}",msg.id);
            self.doc.append(child);
            self.list.push(msg);
            self.animate(msg);
        };

        this.animate=function (msg) {
            console.log(self.__moveHeight__+"px");
            $("#"+msg.id).animate({height:"-="+self.__moveHeight__+"px"},3600);
        }

        this.delTopMsg=function () {
            //TODO 处理视图
            var delNode=this.list[0];
            this.list.splice(0, 1);
            $("#"+delNode.id).remove();
//            self.doc.remove("#"+id);
        }
    };

    var factory=new MsgFactory();
    factory.init("msgList");
    factory.addMsg({"ic":"ic","nickName":"小明","content":"嘿嘿嘿","id":123});
    factory.addMsg({"ic":"ic","nickName":"小明","content":"嘿嘿嘿","id":111});
//    factory.delTopMsg();




    //    var $;
    //    var list=[];
    //    var interval;
    //    var index=0;
    //    var param={
    //        "startLevel":10,
    //        "limit":20
    //    };
    //
    //    var app = new Vue({
    //        el: '#APP',
    //        data: {
    //            list:list,msg:""
    //        },updated: function () {
    //        },
    //        mounted: function () {
    //            initLayui();
    //        },method:{
    //
    //        }
    //    });
    //
    //    function initLayui(){
    //        layui.use('jquery', function(){
    //            $=layui.jquery;
    //            startGetMsg();
    //            //动态获取设置。
    ////            $.get("/api/danmu/getSetting",function (res) {
    ////                if(res.result){
    ////                    var data=res.data;
    ////                    param.startLevel=data.startLv;
    ////                }
    ////            })
    //        })
    //    }
    //
    //
    //    function startGetMsg(){
    //        interval= setInterval(factoryMsg, 1000);
    //    };
    //
    //    function factoryMsg() {
    //        post("/api/danmu/getCurrentMsgList",JSON.stringify(param),function (res) {
    //            console.log("JSON>>>>>>>>>>>>>>>>"+JSON.stringify(res));
    //            list=[];
    //            list=res;
    //            app.list=list;
    //        },function (err) {
    //
    //        })
    //    }
    //
    //
    //    function stop(){
    //        index=0;
    //        clearInterval(interval);
    //    };

    var post=function(url,data,success,error){
        $.ajax({
                type: "post",
                url: url,
                data: data,
                contentType: "application/json; charset=utf-8",
//                    async: true, // 使用同步方式
                success: success,error:error}
        );
    }

</script>
</body>
</html>